﻿<html>
<head>
<title>基本过滤选择器</title>
<style type="text/css">
	.One{
		Width:200px;
		Height:100px;
		border:thin solid black;
		background-color:Silver;
	}
	.Middle{
		Width:50px;
		Height:50px;
		border:thin solid black;
		background-color:Silver;
	}
</style>


<script type="text/javascript" src="jquery-1.5.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#Button1").click(function () {
           $("div")
        })

        // Class Selector
        $("#Button2").click(function () {
            $(".One").css("backgroundColor", "Blue");
        })

        // Element Selector
        $("#Button3").click(function () {
            $("div").css("backgroundColor", "green");
        })

        // All(*) Selector
        $("#Button4").click(function () {
            $("*").css("backgroundColor", "red");
        })

        // Mixed Selector
        $("#Button5").click(function () {
            $("input,div.Middle,#id1").css("backgroundColor", "pink");
        })
    })


</script>
</head>
<body>

	<div class="One" id="One">
		class是One。
		<div class="Middle">class是Middle</div>
	</div>
    <div class="One" id="Two">
		class是One。
		<div class="Middle">class是Middle</div>
	</div>
    <div class="One" id="Three">
		class是One。
		<div class="Middle">class是Middle</div>
	</div>
    <input type="button" id="Button1" value="first" />
    <input type="button" id="Button2" value="last" />
    <input type="button" id="Button3" value="Element Selector" />
    <input type="button" id="Button4" value="* Selector" />
    <input type="button" id="Button5" value="Mixed Selector" />

</body>
</html>